<template>
  <div class style="width: 600px;height:600px">
    <pivot
      :data="data"
      :fields="fields"
      :row-field-keys="rowFieldKeys"
      :col-field-keys="colFieldKeys"
      :reducer="reducer"
    >
      <!-- Optional slots can be used for formatting table headers and values, see documentation below -->
    </pivot>
  </div>
</template>

<script>
import { Pivot } from '@click2buy/vue-pivot-table'
// import tsG2Chart from '@/components/tsG2Chart.vue'
export default {
  name: 'pivotTable',
  components: {Pivot},
  data: function() {
    return {
     data: Object.freeze([{ x: 0, y: 0, z: 0 }, { x: 1, y: 1, z: 1 }]),
      fields: [{
        key: 'x',
        getter: item => item.x,
        label: 'X'
      }, {
        key: 'y',
        getter: item => item.y,
        label: 'Y'
      }, {
        key: 'z',  
        getter: item => item.z,
        label: 'Z'
      }],
      rowFieldKeys: ['y', 'z'],
      colFieldKeys: ['x'],
      reducer: (sum, item) => sum + 1
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
  }
}
</script>

